<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="heroList">
    
  </ul>

  <script>
     const ul = document.getElementById("heroList")
  
    /**
     * 远程获取王者荣耀所有的英雄数据
     */
    async function getHeroes() {
      return fetch('https://study.duyiedu.com/api/herolist')
        .then((resp) => resp.json())
        .then((resp) => resp.data);
    }
    // 利用getHeroes方法，获取所有的英雄数据，将英雄名称显示到页面的列表中

      (async () => {
        const data = await getHeroes();
        const result = data.map(d=> `<li>${d.cname}</li>`).join('')
        ul.innerHTML = result
        
      })()

  </script>
</body>

</html>